import React, { Component } from 'react'
import { Link } from 'react-router-dom';
import { useParams,useSearchParams,useResolvedPath  } from 'react-router-dom'


export const people = [
  {
    id: 0,
    name: '凯瑟琳·约翰逊',
    profession: '数学家',
    accomplishment: '太空飞行相关数值的核算',
    imageId: 'MK3eW3A',
  },
  {
    id: 1,
    name: '马里奥·莫利纳',
    profession: '化学家',
    accomplishment: '北极臭氧空洞的发现',
    imageId: 'mynHUSa',
  },
  {
    id: 2,
    name: '穆罕默德·阿卜杜勒·萨拉姆',
    profession: '物理学家',
    accomplishment: '关于基本粒子间弱相互作用和电磁相互作用的统一理论',
    imageId: 'bE7W1ji',
  },
  {
    id: 3,
    name: '珀西·莱温·朱利亚',
    profession: '化学家',
    accomplishment: '开创性的可的松药物、类固醇和避孕药',
    imageId: 'IOjWm71',
  },
  {
    id: 4,
    name: '苏布拉马尼扬·钱德拉塞卡',
    profession: '天体物理学家',
    accomplishment: '白矮星质量计算',
    imageId: 'lrWQx8l',
  },
];



export default function List() {
  
  let params = useParams() //这里是获取params的方式传值
  let [searchParams] = useSearchParams()  //这里是通过query params的方式传值
  let path = useResolvedPath('') //获取页面的全路径
  
  console.log(path,'path')

	let temp1= people.filter(v=>v.profession==='化学家')
	let tempStr1= temp1.map((v,index)=>{
		return <li key={v.id}>{v.name}</li>
	})
	
	let temp2= people.filter(v=>v.profession!=='化学家')
	let tempStr2= temp2.map((v,index)=>{
		return <li key={v.id}>{v.name}</li>
	})
	return(
    <>
      <h3>Params: ID:{params.id} / Title:{params.title}</h3>
      <h3>Search Params:Time - { searchParams.get('time')}</h3>
		<ul>{tempStr1}</ul>
      <ul style={{ borderTop: '1px dotted #000' }}>{tempStr2}</ul>
      
    
		</>
	)
}

